<template>
  <el-row class="container">
    <el-avatar class="avatar" :size="60" :src="user.imageUrl">
      <img
        src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
      />
    </el-avatar>
    <p class="text">
      {{ message }}
    </p>
  </el-row>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      default: "myMessage",
    },
    user: {
      type: Object,
      default: function () {
        return {
          nickName: "吴小莉",
          imageUrl:
            "https://pic4.zhimg.com/80/v2-4eec4608c5a796d5c247022a6d8b8e87_720w.jpg",
        };
      },
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  margin-top: 10px;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  .text {
    background-color: #eee;
    border-radius: 5px;
    display: flex;
    align-items: center;
    padding: 10px 20px;
    margin: 0 10px;
    line-height: 20px;
    white-space: all;
    word-break:break-all;
  }
  .avatar {
    flex-shrink: 0;
  }
}
</style>
